<div class="content">
  <!-- 用户信息外框 -->
  <div class="user_body">
    <!-- 新增用戶賬號文本 -->
    <p class="add_user">新增用戶賬號</p>
    <!-- 第1行input -->
    <div class="input_first" style="margin-left: 4%;">
      工號：<input type="text" [(ngModel)]="job_no" value='' name='' id='job_no' [disabled]='!showInput'>
    </div>
    <div class="input_first" style="margin-left: 0px;">
      中文名：<input type="text" [(ngModel)]="name" name=''>
    </div>
    <div class="input_first" style="margin-left: 0px;">
      所屬部門：<input type="text" [(ngModel)]="department" name=''>
    </div>
    <div class="input_first" style="margin-left: 0px;">
      手機：<input [(ngModel)]="mobile" name=''>
    </div>
    <!-- 第2行input -->
    <div class="input_first" style="margin-left: 4%;">
      密碼：<input type="password" [(ngModel)]="password" name=''>
    </div>
    <div class="input_first" style="margin-left: 0%;">
      英文名：<input type="text" [(ngModel)]="name_PY" name=''>
    </div>
    <div class="input_first" style="margin-left: 0;">
      部門代號：<input type="text" [(ngModel)]="department_abb" name=''>
    </div>
    <div class="input_first" style="margin-left: 0;">
      郵箱：<input type="email" style="width:270px" [(ngModel)]="mail" name=''>
    </div>
    <!-- 第3行input 職位 remark-->
    <div class="input_sec">
      <div style="width:100%;display:inline-block;">
        <span>職位：</span>
        <nz-checkbox-group [(ngModel)]="job" (ngModelChange)="chooseRemark(job)"></nz-checkbox-group>
      </div>
    </div>
    <!-- 第4行input 訪問權限 level-->
    <div class="input_sec">
      <div style="width:100%;">
        <span>訪問權限：</span>
        <nz-checkbox-group [(ngModel)]="access" (ngModelChange)="chooseLevel(access)"></nz-checkbox-group>
      </div>
    </div>
    <!-- 第5行input 賬戶權限 role-->
    <div class="input_sec">
      <div style="width:100%;">賬戶權限：
        <nz-radio-group [(ngModel)]="roleValue" (ngModelChange)="chooseRole(roleValue)">
          <label nz-radio nzValue="管理員">管理員</label>
          <label nz-radio nzValue="用戶">用戶</label>
          <label nz-radio nzValue="客戶">客戶</label>
        </nz-radio-group>
      </div>
    </div>
    <!-- 分割线 -->
    <div class="wrap"></div>
    <!-- 按钮 -->
    <div style="width: 100%;display: flex;">
      <div style="margin:0 auto; margin-top:1%;margin-bottom:1%;">
        <!-- 删除按钮 -->
        <button class="delet" (click)="delInput()"></button>
        <!-- 保存按钮 -->
        <button class="save" (click)="save()"></button>
      </div>
    </div>
  </div>

  <!-- 用户信息列表 -->
  <div class="user_list">
    <nz-table #headerTable [nzData]="userdata" [nzShowPagination]=false nzSize="middle"
      style="border-collapse: collapse; border-radius: 4px 4px 0px 0px;"
      [nzScroll]="{ y: '300px' }">
      <!-- 表头 -->
      <thead>
        <tr>
          <th nzWidth="150px">工號</th>
          <th nzWidth="150px">中文名</th>
          <th nzWidth="150px">英文名</th>
          <th nzWidth="150px">部門代號</th>
          <th nzWidth="150px">所屬部門</th>
          <th nzWidth="200px">職位</th>
          <th nzWidth="150px">訪問權限</th>
          <th nzWidth="150px">賬戶權限</th>
          <th nzWidth="200px">手機</th>
          <th nzWidth="250px">郵箱</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of userdata" class="list_hover" (click)="edit(item)">
          <td>{{ item.job_no }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.name_PY }}</td>
          <td>{{ item.department_abb }}</td>
          <td>{{ item.department }}</td>
          <td style="max-width: 180px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;" title="{{ item.remark }}">{{ item.remark }}</td>
          <td>{{ item.level }}</td>
          <td>{{ item.role }}</td>
          <td>{{ item.mobile }}</td>
          <td>{{ item.mail }}</td>
          <!-- 删除按钮 -->
          <td>
            <button nz-button [nzType]="'primary'" class="del" (click)="showModal()"></button>
          </td>
        </tr>
      </tbody>
    </nz-table>
    <!-- 弹出框 -->
    <nz-modal [(nzVisible)]="isVisible" nzTitle="刪除" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'200px'}">
      <p>確定刪除嗎？</p>
    </nz-modal>
  </div>
</div>
